<template>
  <div id="goods">
    <div class="head">
      <div>宝贝</div>
      <div>单价</div>
      <div>数量</div>
      <div>实付款</div>
      <div>交易状态</div>
      <div>交易操作</div>
    </div>
    <ul>
      <li v-for="items in ulData.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="items.descrtip">
        <div class="li_head"><strong>{{items.action.gmtCreate}}</strong></div>
        <div class="li_detail">
            <img :src="items.goodsWant.goodsWantImage" alt="">
            <span style="width: 312px; display:inline-block; margin-left:10px; vertical-align: top"><router-link to="/goodsDetail">{{items.goodsWant.goodsWantInfo}}</router-link></span>
            <span style="display:inline-block; vertical-align:top; margin-left:10px; width: 110px">￥{{items.action.buyPrice}}</span>
            <span style="display:inline-block; vertical-align:top; width: 90px">{{items.action.buyCount}}</span>
            <span style="display:inline-block; vertical-align:top; width: 153px"><strong>￥{{items.action.buyPrice * items.action.buyCount}}</strong></span>
            <span style="display:inline-block; vertical-align:top; ">交易成功</span>
            <a style="display:inline-block; margin-left:102px; cursor:pointer" @click="deleteClick(items.action.actionId)">删除订单</a>
        </div>
      </li>
    </ul>

    <el-pagination background @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" 
                :page-size="pagesize"  layout="total, prev, pager, next, jumper"  :total="ulData.length" prev-text="上一页" 
                next-text="下一页" style="text-align: center; position: absolute; bottom: 20px; left: 403px;">
    </el-pagination>
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      // 默认显示页面为1
      currentPage: 1, 
      // 每页的数据条数
      pagesize: 4, 
      ulData: [
        {action: {actionId: '', buyCount: '', buyPrice: '', gmtCreate: ''}, goodsWant: {goodsWantId: '', goodsWant: '', goodsWantImage: '', 
         goodsWantInfo: ''}},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR2', price: '39.90', count: 2},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR3', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR4', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR5', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR6', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR7', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR8', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR9', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR10', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR11', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR12', price: '39.90', count: 1},
        //  {createTime: '2020-11-23', imgSrc: 'https://img.alicdn.com/imgextra/i3/738722023/O1CN01TO3N6D1QoZrlwTm5c_!!738722023.jpg_80x80.jpg', 
        //  descrip: '南极人厚袜子男秋冬季加厚加绒保暖男士男袜中筒长袜毛巾袜棉袜RR13', price: '39.90', count: 1},
      ],
    }
  },
  methods: {
    //每页下拉显示数据
    handleSizeChange(size) {
      this.pagesize = size;
      /*console.log(this.pagesize) */
    },
    //点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    deleteClick(actionId) {
      // 点击删除按钮，发请求
      request({
        url: `/action/deleteAction/${actionId}`,
        method: 'delete'
      }).then(res => {
        console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          // 重新发请求，更新页面数据
          return request({
            url: '/action/showActionInfo',
            method: 'get',
            params: {
              userId: this.$store.state.userId,
              actionSort: 'b'
            }
          })
        }
      }).then(res => {
        this.ulData = res.data.data.items
      }, err => {
        console.log(err);
      })
    }
  },
  mounted() {
    request({
      url: '/action/showActionInfo',
      method: 'get',
      params: {
        userId: this.$store.state.userId,
        actionSort: 'b'
      }
    }).then(res => {
      console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style>
  #goods {
    font-size: 12px;
    position: relative;
    padding-bottom: 70px;
  }

  #goods .head {
    height: 39px;
    line-height: 39px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
  }

  #goods .head div {
    display: inline-block;
  }

  #goods .head div:first-child {
    width: 450px;
    text-align: center;
  }

  #goods .head div:nth-child(2) {
    width: 100px;
  }

  #goods .head div:nth-child(3) {
    width: 100px;
  }

  #goods .head div:nth-child(4) {
    width: 150px;
  }

  #goods .head div:nth-child(5) {
    width: 150px;
  }

  #goods .head div:nth-child(6) {
    width: 150px;
  }

  #goods ul li {
    border: 1px solid #ececec;
    margin-bottom: 10px;
  }

  #goods ul li .li_head {
    background-color: #f5f5f5;
    height: 39px;
    line-height: 39px;
    padding-left: 30px;
  }

  #goods ul li .li_detail {
    padding: 20px 30px;
  }

  #goods ul li .li_detail img {
    width: 80px;
    height: 80px;
  }

  #goods ul li .li_detail a {
    text-decoration: none;
    color: inherit;
    vertical-align: top;
  }

  #goods ul li .li_detail a:hover {
    color: #f00;
  }

  /* #goods ul li .li_detail > div:first-child {
    width: 370px;
    height: 80px;
  } */
</style>